<template>
  <div>
    <el-dialog
      title="活动详细信息"
      :visible.sync="detailedInformationDialog.Visible"
      width="50%"
      center
    >
      <h1 style="text-align: center">活动具体信息</h1>
      <el-table
        ref="table"
        :key="detailedInformationDialog.tableKey"
        v-loading="detailedInformationDialog.loading"
        :data="detailedInformationDialog.detailTable"
        border
        fit
        style="width: 100%;"
      >
        <el-table-column
          prop="name"
          align="center"
          width="300"
        />
        <el-table-column
          prop="attribute"
          align="center"
          width="300"
        />
      </el-table>
      <h1 style="text-align: center">奖项具体信息</h1>
      <el-table
        ref="table"
        :key="detailedInformationDialog.tableKey"
        v-loading="detailedInformationDialog.loading"
        :data="detailedInformationDialog.list"
        border
        fit
        style="width: 100%;"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="奖项名称">
                <span>{{ props.row.pcName }}</span>
              </el-form-item>
              <el-form-item label="奖项等级">
                <span>{{ props.row.pcLevel }}</span>
              </el-form-item>
              <el-form-item label="奖项状态">
                <span>{{ props.row.pcState }}</span>
              </el-form-item>
              <el-form-item label="奖项管理员">
                <span>{{ props.row.pcAdministratorName }}</span>
              </el-form-item>
              <el-form-item v-show="props.row.pcInfo1" label="奖项信息一">
                <span>{{ props.row.pcInfo1 }}</span>
              </el-form-item>
              <el-form-item v-show="props.row.pcInfo2" label="奖项信息二">
                <span>{{ props.row.pcInfo2 }}</span>
              </el-form-item>
              <el-form-item v-show="props.row.pcInfo3" label="奖项信息三">
                <span>{{ props.row.pcInfo3 }}</span>
              </el-form-item>
              <el-form-item v-show="props.row.pcInfo4" label="奖项信息四">
                <span>{{ props.row.pcInfo4 }}</span>
              </el-form-item>
              <el-form-item label="奖项报名开始时间">
                <span>{{ props.row.pcSignUpStartTime }}</span>
              </el-form-item>
              <el-form-item label="奖项报名结束时间">
                <span>{{ props.row.pcSignUpEndTime }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="pcName"
          label="奖项名称"
          align="center"
          width="300"
        />

        <el-table-column
          prop="pcLevel"
          label="奖项等级"
          align="center"
          width="300"
        />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailedInformationDialog.Visible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="报名活动"
      :visible.sync="signUpDialog.Visible"
      width="50%"
      center
    >
      <h1 style="text-align: center">活动具体信息</h1>
      <el-table
        ref="table"
        :key="signUpDialog.tableKey"
        v-loading="signUpDialog.loading"
        :data="signUpDialog.detailTable"
        border
        fit
        style="width: 100%;"
      >
        <el-table-column
          prop="name"
          align="center"
          width="300"
        />
        <el-table-column
          prop="attribute"
          align="center"
          width="300"
        />
      </el-table>
      <el-form :model="signUpForm.questionAnswer">
        <div
          v-for="(item, for_index) in signUpDialog.activityQuestionList"
          :key="item.aqIndex"
        >
          <el-form-item :label="item.aqName">
            <el-input
              v-model="signUpForm.questionAnswer[for_index]"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              clearable
            />
          </el-form-item>
        </div>
      </el-form>
      <el-form :model="signUpForm.annexFile">
        <div
          v-for="(item, for_index) in signUpDialog.annex"
          :key="item.aqIndex"
        >
          <el-form-item :label="item.annexPath">
            <el-upload
              ref="upload"
              action=""
              :on-preview="handleFilePreview"
              :on-remove="handleFileRemove"
              :file-list="signUpForm.annexFile[for_index]"
              :auto-upload="false"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>  -->
            </el-upload>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="signUp">提 交</el-button>
        <el-button @click="signUpDialog.Visible = false">取 消</el-button>
      </span>
    </el-dialog>
    <div class="app-container">
      <div>
        <el-form label-position="right" label-width="150px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="奖项名称：">
                <el-input v-model="queryParams.sbi_number" class="filter-item search-item" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年度：">
                <el-date-picker v-model="queryParams.value3" type="year" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报名状态：">
                <el-input v-model="queryParams.sbi_number" class="filter-item search-item" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="报名起止日期：">
                <el-date-picker
                  v-model="queryParams.dateTime"
                  align="right"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  class="filter-item search-item"
                  format="yyyy-MM-dd"
                  value-format="yyyyMMdd"
                  style="width : 350px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button class="filter-item" type="primary" @click="search">
                {{ $t('table.search') }}
              </el-button>
              <el-button class="filter-item" type="success" @click="reset">
                {{ $t('table.reset') }}
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="app-container">
      <el-table
        ref="table"
        :key="tableKey"
        v-loading="loading"
        :data="list"
        height="400"
        border
        fit
        style="width: 100%;"
      >
        <el-table-column
          prop="activityName"
          label="活动名称"
          align="center"
          width="300"
        />

        <el-table-column
          prop="activityCreateTime"
          align="left"
          label="创建时间"
          width="150"
          sortable
        />

        <el-table-column
          prop="activityStartTime"
          align="left"
          label="报名开始时间"
          width="150"
        />

        <el-table-column
          prop="activityEndTime"
          align="left"
          label="结束时间"
          width="150"
        />

        <el-table-column
          prop="activityDescribe"
          align="left"
          label="活动简介"
          width="200"
        />

        //成果状态
        <el-table-column
          prop="status"
          label="审核状态"
          width="100"
          align="center"
          :filters="[{ text: '进行中', value: '进行中' }, { text: '已结束', value: '已结束' }, { text: '未开始', value: '未开始' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="(scope.row.status === '进行中')? 'success':
                (scope.row.status === '已结束')? 'warning':
                (scope.row.status === '未开始') ? 'info':
                'info'"
              disable-transitions
            >{{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
          width="180"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-link :disabled="scope.row.status !== '进行中'" type="primary" @click="handleClickSignUp(scope.row)">我要报名
            </el-link>
            <el-link type="primary" @click="handleClickInfo(scope.row)">详细信息
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pagination.num"
        :limit.sync="pagination.size"
        @pagination="search"
      />
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'

export default {
  name: 'StudentScholarship',
  components: { Pagination },
  data() {
    return {
      detailedInformationDialog: {
        detailTable: [],
        list: [],
        Visible: false,
        loading: false,
        tableKey: 0
      },
      signUpDialog: {
        Visible: false,
        loading: false,
        ifSignUp: false,
        tableKey: 0,
        studentBasicInfo: '',
        detailTable: [],
        activityQuestionList: [],
        annex: []
      },
      signUpForm: {
        questionAnswer: [],
        annexFile: []
      },
      queryParams: {
        sbi_name: '',
        value3: '',
        sbi_number: '',
        dateTime: ''
      },
      pagination: {
        size: 10,
        num: 1
      },
      loading: false,
      selected: '',
      tableKey: 0,
      total: 0,
      list: []
    }
  },
  computed: {
    currentUser() {
      return this.$store.state.account.user
    }
  },
  mounted() {
    this.reset()
  },
  methods: {
    fetchTable(params = {}) {
      this.loading = true
      const nowTime = new Date()
      // console.log({...params})
      const queryUri = '/api/price/price/queryAllActivity'
      this.$get(queryUri, {
        ...params
      }).then((r) => {
        const data = r.data.data
        // console.log(r.data)
        this.list = []
        if (r.data.code === 200 && data.length !== 0) {
          this.total = data.length
          this.$message({
            message: '查询成功',
            type: 'warning'
          })
          for (let i = 0; i < data.length; i++) {
            const CreateTime = new Date(data[i].activityCreateTime)
            const StartTime = new Date(data[i].activityStartTime)
            const EndTime = new Date(data[i].activityEndTime)
            this.list.push(
              {
                activityIndex: data[i].activityIndex,
                activityName: data[i].activityName,
                activityCreateTime: CreateTime.toLocaleDateString() + ' ' + (CreateTime.getHours() < 10 ? '0' : '') + CreateTime.getHours() + ':' + (CreateTime.getMinutes() < 10 ? '0' : '') + CreateTime.getMinutes() + ':00',
                activityStartTime: StartTime.toLocaleDateString() + ' ' + (StartTime.getHours() < 10 ? '0' : '') + StartTime.getHours() + ':' + (StartTime.getMinutes() < 10 ? '0' : '') + StartTime.getMinutes() + ':00',
                activityEndTime: EndTime.toLocaleDateString() + ' ' + (EndTime.getHours() < 10 ? '0' : '') + EndTime.getHours() + ':' + (EndTime.getMinutes() < 10 ? '0' : '') + EndTime.getMinutes() + ':00',
                activityInfo1: data[i].activityInfo1,
                activityInfo2: data[i].activityInfo2,
                activityInfo3: data[i].activityInfo3,
                activityInfo4: data[i].activityInfo4,
                activityFounder: data[i].activityFounder,
                activityFounderID: data[i].activityFounderID,
                activityDescribe: (data[i].activityDescribe === '') ? '无' : data[i].activityDescribe,
                status: (nowTime < StartTime) ? '未开始' : (nowTime < EndTime) ? '进行中' : '已结束'
              }
            )
          }
        } else if (r.data.code === 200 && data.length === 0) {
          this.total = 0
          this.$message({
            message: '查询数据为空。',
            type: 'warning'
          })
        } else {
          this.$message({
            message: '查询失败，请重置。',
            type: 'warning'
          })
        }
        // console.log(this.list[0].activityCreateTime)
        this.loading = false
      })
    },
    fetchDescription() {
      this.detailedInformationDialog.loading = true
      this.detailedInformationDialog.list = []
      this.detailedInformationDialog.detailTable = []
      this.detailedInformationDialog.detailTable.push(
        {
          name: '活动名称',
          attribute: this.selected.activityName
        },
        {
          name: '活动信息一',
          attribute: this.selected.activityInfo1
        },
        {
          name: '活动信息二',
          attribute: this.selected.activityInfo2
        },
        {
          name: '活动信息三',
          attribute: this.selected.activityInfo3
        },
        {
          name: '活动信息四',
          attribute: this.selected.activityInfo4
        },
        {
          name: '活动简介',
          attribute: this.selected.activityDescribe
        }
      )
      const queryUri = '/api/price/price/queryPriceInfoByActivity'
      this.$get(queryUri, {
        'activityIndex': this.selected.activityIndex
      }).then((r) => {
        const data = r.data.data
        // console.log(r.data)
        if (r.data.code === 200 && data.length !== 0) {
          this.$message({
            message: '查询成功',
            type: 'warning'
          })
          for (let i = 0; i < data.length; i++) {
            this.detailedInformationDialog.list.push(
              {
                pcIndex: data[i].pcIndex,
                paaIndex: data[i].paaIndex,
                pcName: data[i].pcName,
                pcLevel: data[i].pcLevel,
                pcState: data[i].pcState,
                pcAdministrator: data[i].pcAdministrator,
                pcAdministratorName: data[i].pcAdministratorName,
                pcSignUpStartTime: this.changeDate(data[i].pcSignUpStartTime),
                pcSignUpEndTime: this.changeDate(data[i].pcSignUpEndTime),
                pcAuditEndTime: this.changeDate(data[i].pcAuditEndTime),
                pcDemocraticEvalEndTime: this.changeDate(data[i].pcDemocraticEvalEndTime),
                pcEuotaDivisionEndTime: this.changeDate(data[i].pcEuotaDivisionEndTime),
                pcDefenceEndTime: this.changeDate(data[i].pcDefenceEndTime),
                pcPublicityEndTime: this.changeDate(data[i].pcPublicityEndTime),
                pcPublicityFile: data[i].pcPublicityFile,
                pcCreateTime: this.changeDate(data[i].pcCreateTime),
                pcInfo1: (data[i].pcInfo1) ? data[i].pcInfo1 : '无',
                pcInfo2: (data[i].pcInfo2) ? data[i].pcInfo2 : '无',
                pcInfo3: (data[i].pcInfo3) ? data[i].pcInfo3 : '无',
                pcInfo4: (data[i].pcInfo4) ? data[i].pcInfo4 : '无',
                pcTotalQuota: data[i].pcTotalQuota,
                activityIndex: data[i].activityIndex,
                activityName: data[i].activityName
              }
            )
          }
        } else if (r.data.code === 200 && data.length === 0) {
          this.total = 0
          this.$message({
            message: '查询数据为空。',
            type: 'warning'
          })
        } else {
          this.$message({
            message: '查询失败，请重置。',
            type: 'warning'
          })
        }
        // console.log(this.list[0].activityCreateTime)
        this.detailedInformationDialog.loading = false
      })
    },
    fetchSignUp() {
      this.signUpDialog.loading = true
      this.signUpDialog.detailTable = []
      this.signUpDialog.detailTable.push(
        {
          name: '活动名称',
          attribute: this.selected.activityName
        },
        {
          name: '活动信息一',
          attribute: this.selected.activityInfo1
        },
        {
          name: '活动信息二',
          attribute: this.selected.activityInfo2
        },
        {
          name: '活动信息三',
          attribute: this.selected.activityInfo3
        },
        {
          name: '活动信息四',
          attribute: this.selected.activityInfo4
        },
        {
          name: '活动简介',
          attribute: this.selected.activityDescribe
        }
      )
      const queryUri = '/api/price/price/queryAvailableActivity'
      this.$get(queryUri, {
        'activityIndex': this.selected.activityIndex
      }).then((r) => {
        const data = r.data.data
        // console.log(r.data)
        if (r.data.code === 200 && data.length !== 0) {
          this.$message({
            message: '查询成功',
            type: 'warning'
          })
          this.signUpDialog.studentBasicInfo = data.studentBasicInfo
          this.signUpDialog.ifSignUp = data.ifSignUp
          this.signUpDialog.annex = data.annex
          this.signUpForm.annexFile = []
          for (let i = 0; i < data.annex.length; i++) {
            this.signUpForm.annexFile.push('')
          }
          this.signUpDialog.activityQuestionList = data.activityQuestionList
          this.signUpForm.questionAnswer = []
          for (let i = 0; i < data.activityQuestionList.length; i++) {
            this.signUpForm.questionAnswer.push('')
          }
          this.signUpDialog.detailTable.push(
            {
              name: '是否已报名',
              attribute: data.ifSignUp ? '已报名' : '未报名'
            }
          )
          this.signUpDialog.loading = false
        } else {
          this.$message({
            message: '查询失败，请重置。',
            type: 'warning'
          })
        }
        // console.log(this.list[0].activityCreateTime)
        this.detailedInformationDialog.loading = false
      })
    },
    reset() {
      this.$refs.table.clearSort()
      this.$refs.table.clearFilter()
      this.fetchTable()
      // this.search()
    },
    search() {
      this.fetchTable(this.queryParams)
    },
    filterTag(value, row) {
      return row.status === value
    },
    signUp() {
      // this.$refs.upload.submit();
      console.log('sign up')
    },
    handleClickSignUp(obj) {
      this.selected = obj
      this.fetchSignUp()
      this.signUpDialog.Visible = true
    },
    handleClickInfo(obj) {
      this.selected = obj
      this.fetchDescription()
      this.detailedInformationDialog.Visible = true
      // console.log(obj)
    },
    changeDate(time) {
      if (!time) {
        return '无'
      }
      const retTime = new Date(time)
      return retTime.toLocaleDateString()
    },
    handleFileRemove(file, fileList) {
      console.log(file, fileList)
    },
    handleFilePreview(file) {
      console.log(file)
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

